{% load i18n adminmedia %}

{# TODO http://www.webtoolkit.info/ajax-file-upload.html #}

<style>
.tabs {
    margin-left:106px;
    padding-top:.5em;
}
.tab_header .active,
.tab_header .inactive {
    background-attachment: scroll;
    background-clip: border-box;
    background-origin: padding-box;
    font-size: 11px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: .5em;
    margin-top: 0px;
    padding-bottom: 3px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    font-weight: bold;
}
.tab_header .active {
    height: 13px;
    background-color: #7CA0C7;
    background-image: url({% admin_media_prefix %}img/admin/default-bg.gif);
    color: white;
}
.tab_header .inactive {
    /*border-bottom:1px dotted #000000;*/
    cursor:pointer;
}
.tab_content .preview,
.tab_content textarea {
    width:60em !important;
    height:30em !important;
}
.tab_content .preview {
    overflow-y:scroll;
    overflow-y:scroll;
    border:solid 1px #ccc;
    margin-top:2px;
    padding-bottom: 2px;
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 3px;
}
</style>

<div class="tabs" id="{{ attrs.id }}_text_tabs">
    <div class="tab_header">
        <span class="active">{% trans "Text" %}</span>
        <span class="inactive" id="{{ attrs.id }}_swith_to_preview">{% trans "Preview" %}</span>
    </div>
    <div class="tab_content" id="{{ attrs.id }}_text_tab_content">
    </div>
</div>

<div class="tabs" id="{{ attrs.id }}_preview_tabs" style="display:none">
    <div class="tab_header">
        <span class="inactive" id="{{ attrs.id }}_swith_to_text">{% trans "Text" %}</span>
        <span class="active">{% trans "Preview" %}</span>
    </div>
    <div class="tab_content" id="{{ attrs.id }}_preview_tab_content">
        <div class="preview" id="{{ attrs.id }}_preview"></div>
    </div>
</div>

<script>
(function(){
    var text_el = document.getElementById('{{ attrs.id }}');
    var cb_el = document.getElementById('{{ autoformat_checkbox_id }}');

    document.getElementById('{{ attrs.id }}_text_tab_content').appendChild(text_el);

    var text_tabs = document.getElementById('{{ attrs.id }}_text_tabs');
    var preview_tabs = document.getElementById('{{ attrs.id }}_preview_tabs');
    var preview_content = document.getElementById('{{ attrs.id }}_preview');

    document.getElementById('{{ attrs.id }}_swith_to_preview').onclick = function() {
        text_tabs.style.display = 'none';
        preview_tabs.style.display = 'block';
        preview_content.innerHTML = '{% trans "Loading..." %}';
        postRequest('{{ preview_url }}', {
            'text': text_el.value,
            'autoformat': (cb_el && cb_el.checked ? '1' : '0')
        }, function(content) {
            preview_content.innerHTML = content;
        })
    }
    document.getElementById('{{ attrs.id }}_swith_to_text').onclick = function() {
        text_tabs.style.display = 'block';
        preview_tabs.style.display = 'none';
    }
})()

function postRequest(url, params, onDone) {
    try {
        var req = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {
        var req = new XMLHttpRequest();
    }
    var timer = setTimeout(function() {
        onDone('<span class="error">Ошибка при запросе.</span>');
    }, 5000);
    req.onreadystatechange = function() {
        if ((req.readyState == 4) && (req.status == 200)) {
            clearTimeout(timer)
            onDone(unescape(req.responseText));
        }
    }
    req.open("POST", url, false);
    req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    var data = '';
    for (var k in params) {
        var v = (
            params[k]
            .replace(/;/g, '%3B')
            .replace(/&/g, '%26')
        );
        data += k + '=' + v + '&';
    }
    req.send(data);
}
</script>